<!-- 同步布局预览 -->
<template>
  <container-item-wrapper :widget="widget">
    <div :key="widget.id"
      class="layout-container"
      :class="[!!widget.options.folded ? 'folded' : '', customClass]"
      :style="{width: widget.options.cardWidth + '!important' || ''}"
      :ref="widget.id"
      v-show="!widget.options.hidden">
      <template v-if="!!widget.rightLists && (widget.rightLists.length > 0)">
        <template v-for="(subWidget, swIdx) in widget.rightLists">
          <template v-if="'container' === subWidget.category">
            <component :is="getComponentByContainer(subWidget)"
              :widget="subWidget"
              :key="swIdx"
              :parent-list="widget.rightLists"
              :index-of-parent-list="swIdx"
              :parent-widget="widget">
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($slots)"
                v-slot:[slot]="scope">
                <slot :name="slot"
                  v-bind="scope" />
              </template>
            </component>
          </template>
          <template v-else>
            <component :is="subWidget.type + '-widget'"
              :field="subWidget"
              :designer="null"
              :key="swIdx"
              :parent-list="widget.rightLists"
              :index-of-parent-list="swIdx"
              :parent-widget="widget">
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($slots)"
                v-slot:[slot]="scope">
                <slot :name="slot"
                  v-bind="scope" />
              </template>
            </component>
          </template>
        </template>
      </template>
    </div>
  </container-item-wrapper>
</template>

<script>
import emitter from '@/utils/emitter'
import i18n from "@/utils/i18n"
import refMixin from "@/components/form-render/refMixin"
import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'
import containerItemMixin from "@/components/form-render/container-item/containerItemMixin"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'

export default {
  name: "layout-sync-item",
  componentName: 'ContainerItem',
  mixins: [emitter, i18n, refMixin, containerItemMixin],
  components: {
    ContainerItemWrapper,
    ...FieldComponents,
  },
  props: {
    widget: Object
  },
  inject: ['refList', 'sfRefList', 'globalModel'],
  data() {
    return {
    }
  },
  computed: {
    customClass() {
      return this.widget.options.customClass || ''
    }
  },
  created() {
  },
  mounted() {
  },
  beforeUnmount() {
    this.unregisterFromRefList()
  },
  methods: {
    /**
     * 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false
     * @param evt
     * @returns {boolean}
     */
    checkContainerMove(evt) {
      return true
    },
    //拖动改变面板大小
  },
}
</script>
<style lang="scss" >
</style>
<style lang="scss" scoped>
@import "@/styles/function.scss";
.rk-form-render-container {
  .container-wrapper:has(.layout-container) {
    height: 100%;
  }
}
.layout-container {
  height: 100% !important;
}

@include b(layout) {
  height: 100% !important;
  width: 100%;
  position: relative;
  &-panel-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.3;
    z-index: 80;
  }
  &-header {
    display: flex;
  }

  &-header-group {
    display: flex;
    align-content: center;
    align-items: center;
    width: 100%;

    &__left {
      // width: 50%;
      box-sizing: border-box;
      height: 100%;
    }

    &__right {
      // width: 50%;
      margin-left: auto;
      box-sizing: border-box;
      height: 100%;
    }
  }

  &-header-left {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-left-g {
    width: 90%;
    display: flex;
    justify-content: flex-start;
  }

  &-header-right {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-right-g {
    width: 90%;
    display: flex;
    justify-content: flex-end;
  }

  &-aside {
    //background-color: #0d84ff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-right: 10px;

    &__body {
      box-sizing: border-box;
      border: 1px solid #dadada;
    }

    &__line {
      position: absolute;
      top: 0;
      width: 10px;
      left: var(--var-aside-width);
      height: 100%;
      cursor: w-resize;
      z-index: 90;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &__line:hover {
      background-color: #eaeaea;
    }
  }
  &-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
  }
  &-main-content {
    //background-color: #e7746f;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  &-main-footer {
    box-sizing: border-box;
    border: 1px solid #dadada;
    border-left: unset;
    border-right: unset;
    border-bottom: unset;
    padding: 0;
    margin: 0;
  }
  &-ex-text-center {
    text-align: center;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

:deep(.el-header) {
  padding: 0;
}
</style>